<template>
    <div class="banner" :style="{ width: width + 'px', height: height + 'px' }" @mouseover="mouseover"
        @mouseout="mouseout" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
        <ul :style="{ width: width * (banner.length + 1) + 'px' }" ref="swiper">
            <li v-for="item, index in banner" :key="index" @click="upImg(index)"><img
                    :src="$api.getAssetsFile(item.url)" alt="" :style="{ width: width + 'px', height: height + 'px' }">
            </li>
            <li @click="upImg(0)"><img :src="$api.getAssetsFile(banner[0].url)" alt=""
                    :style="{ width: width + 'px', height: height + 'px' }"></li>
        </ul>
        <!-- 指示器 -->
        <div class="pointer flex" v-if="trigger">
            <div v-for="item, index in banner.length" :key="index" class="cursor-pointer"
                :class="[triggerIndex == index ? 'up' : '', index == banner.length - 1 ? '' : 'm-r-5']"
                @click="flag && change(index)">
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch, onMounted } from 'vue'
const props = defineProps({
    // 图片的数据
    banner: [Array],
    // 盒子的宽高
    width: [String, Number],
    height: [String, Number],
    // 是否显示指示器
    trigger: {
        type: Boolean,
        default: true
    },
    // 是否自动播放
    autoplay: {
        type: Boolean,
        default: true
    },
    // 自动播放的间隔时间
    interval: {
        type: [String, Number],
        default: 5000
    }
})

const { proxy } = getCurrentInstance()

// 轮播图的索引
let i = ref(0)
// 步长
let wy = ref(0)
let swiper = ref(null)
// 指示器的索引
let triggerIndex = ref(0)
// 自动播放定时器
let timer = ref(null)
// 节流阀
let flag = ref(true)

onMounted(() => {
    props.autoplay && (timer.value = setInterval(() => {flag.value && i.value++ }, props.interval))
})

// 监听图片的索引
watch(i, (newValue, oldValue) => {
    // 关闭节流阀
    flag.value = false
    // 指示器索引赋值
    triggerIndex.value = newValue
    if (newValue < 0) {
        i.value = props.banner.length - 1
        swiper.value.style.left = -(props.banner.length * props.width) + 'px'
    }
    if (newValue == props.banner.length + 1) {
        i.value = 1
        swiper.value.style.left = 0
    }
    wy.value += props.width * (oldValue - newValue)
    proxy.$api.animate(swiper.value, wy.value, 15,()=>{flag.value = true})
})
// 监听指示器的索引
watch(triggerIndex, (value) => {
    if (value == props.banner.length) {
        triggerIndex.value = 0
    }
    if (value < 0) {
        triggerIndex.value = props.banner.length - 1
    }
})

// 点击图片
const upImg = (index) => {
    console.log(index);
}

// 指示器索引改变
const change = (index) => {
    i.value = index
    triggerIndex.value = index
    // 不监听图片索引的方法
    // wy.value += props.width * (i.value - index)
    // proxy.$api.animate(swiper.value, wy.value)
}

// 鼠标移动到图片事件
const mouseover = () => {
    clearInterval(timer.value)
    timer.value = null
}

// 鼠标离开图片事件
const mouseout = () => {
    timer.value = setInterval(() => { flag.value && i.value++ }, props.interval)
}

// 不监听图片索引的方法
// // 向左按钮
// const arrowLeft = () => {
//     if (i.value == 0) {
//         i.value = props.banner.length
//         swiper.value.style.left = -(props.banner.length * props.width) + 'px'
//         wy.value = -(props.banner.length * props.width)
//     }
//     i.value--
//     triggerIndex.value--
//     wy.value += Number(props.width)
//     proxy.$api.animate(swiper.value, wy.value)
// }
// // 向右按钮
// const arrowRight = () => {
//     if(i.value == props.banner.length){
//         i.value = 0
//         swiper.value.style.left = 0
//         wy.value = 0
//     }
//     i.value++
//     triggerIndex.value++
//     wy.value -= props.width
//     proxy.$api.animate(swiper.value, wy.value)
// }

/********************* 移动端 **************************/

/**
 * @touhes  正在触碰屏幕的所有手指的一个列表
 * @targetTouhes 正在触摸当前DOM元素上的手指的一个列表
 * @changedTouches 手指状态发生了改变的列表，从无到有，从有到无变化
 * 
 */

// 手指的初始坐标
let startX = ref(0)
let startY = ref(0)
// 盒子的初始坐标
let x = ref(0)
let y = ref(0)

// 手指触摸DOM元素事件
const touchstart = (e) => {
    // 获取手指初始坐标
    startX.value = e.targetTouches[0].pageX
    startY.value = e.targetTouches[0].pageY
    // 获取盒子初始坐标
    x.value = swiper.value.offsetLeft
    y.value = swiper.value.offsetTop
}

// 手指移动事件
const touchmove = (e) => {
    // 计算手指的移动距离：手指移动之后的坐标减去手指初始的坐标
    var moveX = e.targetTouches[0].pageX - startX.value
    var moveY = e.targetTouches[0].pageY - startY.value
    // 移动盒子：盒子原来的位置+手指移动的距离
    swiper.value.style.left = x.value + moveX + 'px'
    swiper.value.style.top = y.value + moveY + 'px'
    // 阻止屏幕默认的移动
    e.preventDefault();
}

// 手指离开DOM元素事件
const touchend = (e) => {
    // console.log('手指离开:',e);
}






</script>

<style scoped lang='less'>
.banner {
    overflow: hidden;
    margin: 0 auto;
    position: relative;

    &:hover .arrows-left {
        opacity: .5;
    }

    &:hover .arrows-right {
        opacity: .5;
    }

    ul {
        position: absolute;
        left: 0;
        top: 0;

        li {
            float: left;
        }
    }

    .pointer {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);

        div {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            border: 1px solid #fff;
        }

        .up {
            background-color: #fff;
        }
    }
}
</style>